<template>
  <div>
    <KForm :model="model" :rules="rules" ref="loginForm">
      <KFormItem label="用户名" prop="username">
        <KInput v-model="model.username"></KInput>
      </KFormItem>
      <KFormItem label="密码" prop="password">
        <kInput v-model="model.password" type="password"></KInput>
      </KFormItem>
      <KFormItem>
        <button @click="onLogin">登录</button>
      </KFormItem>
      <div>{{model}}</div>
    </KForm>
  </div>
</template>

<script>
import KForm from './KForm.vue'
import KFormItem from './KFormItem'
import KInput from './KInput.vue'
import Notice from '../notice'
import create from '@/utils/create.js'

export default {
  components: {
    KForm,
    KFormItem,
    KInput
  },
  data(){
    return {
      model: {
        username: 'tom',
        password: ''
      },
      rules: {
        username: [
          {required: true, message: '用户名必填'}
        ],
        password: [
          {required: true, message: '密码必填'}
        ]
      }
    }
  },
  methods: {
    onLogin(){
      let notice, message
      this.$refs.loginForm.validate((isValid) =>{
        if(isValid){
          message = '验证通过'
        }else{
          message = '验证不通过'
        }

        notice = create(Notice, {
          title: '提示',
          message: message,
          duration: 2000
        })

        notice.show()
      })
    }
  }
}
</script>